<template>
  <a-range-picker
    v-model="currentVal"
    :show-time="{
      defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')]
    }"
    format="YYYY-MM-DD HH:mm:ss"
    @ok="onChange"
    style="width: 100% !important"
    :disabled="disabled"
    :placeholder="placeholder"
    :allowClear="allowClear"
  />
</template>

<script>
import moment from 'moment'
const formatEnd = 'YYYY-MM-DD HH:mm:ss'
const formatStart = 'YYYY-MM-DD HH:mm:ss'
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    },
    startDate: {
      type: String,
      default: ''
    },
    endDate: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    allowClear: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: [String, Array],
      default: () => ['开始时间', '结束时间']
    }
  },
  data () {
    return {
      moment,
      ranges: { Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] },
      currentVal: this.value
    }
  },
  watch: {
    currentVal(val, oldVal) {
      if (val != oldVal) {
        this.$emit('input', val)
        this.$emit('update:startDate', val && val[0] ? moment(val[0]).format(formatStart) : '')
        this.$emit('update:endDate', val && val[1] ? moment(val[1]).format(formatEnd) : '')
      }
    },
    value (val) {
      this.currentVal = val
    },
    startDate (val) {
      this.currentVal = [val, this.endDate]
    }
    // endDate(val)
  },
  methods: {
    onChange (val) {
      // this.$emit('update:startDate', val && val[0] ? moment(val[0]).format(formatStart) : '')
      // this.$emit('update:endDate', val && val[1] ? moment(val[1]).format(formatEnd) : '')
      // this.$emit('input', val)
      // this.$emit('change', val)
    }
  },
  components: {}
}
</script>

<style></style>
